<template>
  <div class="wheelContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="wheelMain">
      <el-card style="background: black;">
        <div class="content">
          <div class="left">
            <LuckyWheel
              width="350px"
              height="350px"
              class="lucky"
              ref="LuckyWheelRef"
              :blocks="blocks"
              :prizes="prizes"
              :buttons="buttons"
              :defaultStyle="defaultStyle"
              @start="startCallBack"
              @end="endCallBack"
              :activeStyle="activeStyle"
              :defaultConfig="defaultConfig"
            />
            <div class="leftCurtainHead"></div>
            <div class="leftCurtain" style="left: 10px;"></div>
            <div class="leftCurtain" style="left: 61px;" v-if="showCurtainFour"></div>
            <div class="leftCurtain" style="left: 61px; top: 8%;height: 300px;" v-if="showCurtainFive"></div>
            <div class="leftCurtain" style="left: 112px;" v-if="showCurtainThree"></div>
            <div class="leftCurtain" style="left: 163px;" v-if="showCurtainTwo"></div>
            <div class="leftCurtain" style="left: 214px;" v-if="showCurtainOne"></div>
            <div class="leftCurtain" style="right: 10px;"></div>
            <div class="leftCurtain" style="right: 61px;" v-if="showCurtainFour"></div>
            <div class="leftCurtain" style="right: 61px; top: 8%;height: 300px;" v-if="showCurtainFive"></div>
            <div class="leftCurtain" style="right: 112px;" v-if="showCurtainThree"></div>
            <div class="leftCurtain" style="right: 163px;" v-if="showCurtainTwo"></div>
            <div class="leftCurtain" style="right: 214px;" v-if="showCurtainOne"></div>
            <div class="leftCurtainFoot"></div>
            <div class="leftCurtainFootItem" style="left: 35%;"></div>
            <div class="leftCurtainFootItem" style="right: 35%;"></div>
          </div>
          <div class="right">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="150px">
              <el-form-item style="margin-top: 30px;margin-bottom: 18px;" label="奖项一名称：" prop="title1">
                <el-input v-model="form.title1" placeholder="请输入奖项名称" maxlength="6"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 18px;" label="奖项二名称：" prop="title2">
                <el-input v-model="form.title2" placeholder="请输入奖项名称" maxlength="6"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 18px;" label="奖项三名称：" prop="title3">
                <el-input v-model="form.title3" placeholder="请输入奖项名称" maxlength="6"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 18px;" label="奖项四名称：" prop="title4">
                <el-input v-model="form.title4" placeholder="请输入奖项名称" maxlength="6"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 18px;" label="奖项五名称：" prop="title5">
                <el-input v-model="form.title5" placeholder="请输入奖项名称" maxlength="6"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 18px;" label="奖项六名称：" prop="title6">
                <el-input v-model="form.title6" placeholder="请输入奖项名称" maxlength="6"></el-input>
              </el-form-item>
              <el-form-item style="margin-top: 30px;">
                <el-button style="width: 100px;height: 40px;" type="warning" @click="okk">提交</el-button>
                <el-button style="width: 100px;height: 40px;" type="danger" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormRules, FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { LuckyWheel } from '@lucky-canvas/vue'


const route = useRoute()
const router = useRouter()
const LuckyWheelRef = ref<any>(null)

const formRef = ref<FormInstance>()
const form = ref<any>({
  title1: '',
  title2: '',
  title3: '',
  title4: '',
  title5: '',
  title6: '',
})

const showCurtainOne = ref<boolean>(true)
const showCurtainTwo = ref<boolean>(true)
const showCurtainThree = ref<boolean>(true)
const showCurtainFour = ref<boolean>(true)
const showCurtainFive = ref<boolean>(false)


const showCurtain = () => {
  showCurtainOne.value = false
  setTimeout(() => {
    showCurtainTwo.value = false
    setTimeout(() => {
      showCurtainThree.value = false
      setTimeout(() => {
        showCurtainFour.value = false
        setTimeout(() => {
          showCurtainFive.value = true
        }, 120)
      }, 120)
    }, 120)
  }, 120)
}

const rules = ref<FormRules>({
  title1: [{ required: true, message: '请输入奖项名称', trigger: ['change', 'blur'] }],
  title2: [{ required: true, message: '请输入奖项名称', trigger: ['change', 'blur'] }],
  title3: [{ required: true, message: '请输入奖项名称', trigger: ['change', 'blur'] }],
  title4: [{ required: true, message: '请输入奖项名称', trigger: ['change', 'blur'] }],
  title5: [{ required: true, message: '请输入奖项名称', trigger: ['change', 'blur'] }],
  title6: [{ required: true, message: '请输入奖项名称', trigger: ['change', 'blur'] }],
})

const wheel = ref<boolean>(false)

const blocks = reactive([{ padding: '13px', background: '#967647' }])
const prizes = reactive([
  { fonts: [{ text: '', top: '10%', fontWeight: '900', fontColor: '#967647' }], background: 'rgba(248,216,82, 0.7)' },
  { fonts: [{ text: '', top: '10%', fontWeight: '900', fontColor: '#967647' }], background: 'rgba(248,216,82, 0.9)' },
  { fonts: [{ text: '', top: '10%', fontWeight: '900', fontColor: '#967647' }], background: 'rgba(248,216,82, 0.7)' },
  { fonts: [{ text: '', top: '10%', fontWeight: '900', fontColor: '#967647' }], background: 'rgba(248,216,82, 0.9)' },
  { fonts: [{ text: '', top: '10%', fontWeight: '900', fontColor: '#967647' }], background: 'rgba(248,216,82, 0.7)' },
  { fonts: [{ text: '', top: '10%', fontWeight: '900', fontColor: '#967647' }], background: 'rgba(248,216,82, 0.9)' },
])
const defaultStyle = reactive({ background: '#FFFFFF' })
const activeStyle = reactive({ background: '#f6f6af' })
const defaultConfig = reactive({ gutter: 7 })
const buttons = reactive<any>([
  { radius: '40%', background: '#C2AF46' },
  { radius: '35%', background: 'rgba(248,216,82, 0.7)' },
  {
    radius: '30%', background: 'rgba(248,216,82, 0.9)',
    pointer: true,
    fonts: [{ text: '请先配置', top: '-10px', fontWeight: '900', fontColor: '#967647' }],
  }
])

// 生成 [ n, m ) 范围内的随机数（大于等于n，小于m）
// Math.random()*(m-n)+n
const lastValue = ref<number>(0)

const startCallBack = () => {
  if (!wheel.value) {
    ElMessage({
      type: 'warning',
      message: '请先配置转盘奖项'
    })
    return
  }
  LuckyWheelRef.value.play()
  lastValue.value = Math.round(Math.random()*(5-0)+0)
  setTimeout(() => {
    LuckyWheelRef.value.stop(lastValue.value - 1)
    setTimeout(() => {
      ElMessageBox.confirm(`恭喜抽中${prizes[lastValue.value - 1].fonts[0].text}`, '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        showClose: false,
        showCancelButton: false,
        closeOnClickModal: false,
      })
        .then(() => {})
        .catch((e: any) => {
          console.log(e)
        })
    }, 3000)
  }, 4000)
}

const endCallBack = (prize: any) => {
  console.log('prize', prize)
}

const okk = () => {
  formRef.value?.validate((flag) => {
    if (flag) {
      showCurtain()
      wheel.value = true
      prizes[0].fonts[0].text = form.value.title1
      prizes[1].fonts[0].text = form.value.title2
      prizes[2].fonts[0].text = form.value.title3
      prizes[3].fonts[0].text = form.value.title4
      prizes[4].fonts[0].text = form.value.title5
      prizes[5].fonts[0].text = form.value.title6
      buttons[2].fonts[0].text = '开始'
    }
  })
}

const reset = () => {
  LuckyWheelRef.value.stop()
  wheel.value = false
  showCurtainOne.value = true
  showCurtainTwo.value = true
  showCurtainThree.value = true
  showCurtainFour.value = true
  showCurtainFive.value = false
  form.value.title1 = ''
  form.value.title2 = ''
  form.value.title3 = ''
  form.value.title4 = ''
  form.value.title5 = ''
  form.value.title6 = ''
  prizes[0].fonts[0].text = form.value.title1
  prizes[1].fonts[0].text = form.value.title2
  prizes[2].fonts[0].text = form.value.title3
  prizes[3].fonts[0].text = form.value.title4
  prizes[4].fonts[0].text = form.value.title5
  prizes[5].fonts[0].text = form.value.title6
  buttons[2].fonts[0].text = '请先配置'
}


onMounted(() => {

})

</script>

<style lang="scss" scoped>
.wheelContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .wheelMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        width: 100%;
        height: 100%;
        display: flex;
        .left {
          height: 450px;
          flex: 2;
          position: relative;
          .lucky {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
          }
          .leftCurtainHead {
            overflow: hidden;
            position: absolute;
            top: 3%;
            left: 0;
            width: 100%;
            height: 10px;
            opacity: 0.9;
            background-color: #fff;
            border-bottom: 13px solid #fff;
          }
          .leftCurtain {
            overflow: hidden;
            position: absolute;
            top: 10%;
            width: 50px;
            height: 350px;
            background-color: #d14458;
            border-radius: 0 0 70px 70px;
            opacity: 0.95;
            border: 12px solid #fff;
          }
          .leftCurtainFoot {
            overflow: hidden;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 350px;
            height: 25px;
            background-color: #878b96;
            border-radius: 0 0 50% 50%;
            opacity: 0.9;
          }
          .leftCurtainFootItem {
            overflow: hidden;
            position: absolute;
            bottom: 35px;
            width: 10px;
            height: 20px;
            background-color: #878b96;
            opacity: 0.9;
          }
        }
        .right {
          flex: 1.5;
          padding: 5px;
          margin-right: 5px;
          display: flex;
          flex-direction: column;
        }
      }
    }
  }

}
</style>